import { useECharts } from '@/hooks/useECharts';
import { EChartsOption } from 'echarts/types/dist/shared.d.ts';
import { useEffect } from 'react';
// ts
import type { RawFishSupplyType } from '../typing';

interface BarChartProps {
  // 数据（柱状图xAxisData和seriesData数据）
  rawFishSupplyData: RawFishSupplyType.StateType;
}

export const BarChart = ({ rawFishSupplyData }: BarChartProps) => {
  const { chartRef: barRef, chartInstanceRef: barChart } = useECharts();
  const { xAxisData, seriesData } = rawFishSupplyData;
  const chartName = seriesData.filter((item,index)=>index<=4)
  // console.log('seriesData', seriesData, rawFishSupplyData);
  // const chartName0 = seriesData[0] ? seriesData[0].name : '黑鱼';
  // const chartName1 = seriesData[1] ? seriesData[1].name : '海鲈海鲈';
let yData: {
  type: string; smooth: boolean; showSymbol: boolean; name: any;lineStyle?: {
    width: number, // 设置线条宽度
  }; itemStyle: {
    // color: '#00B578',
    color: { type: string; x: number; y: number; x2: number; y2: number; colorStops: { offset: number; color: string; }[]; global: boolean; };
  } | {
    // color: '#278AFF',
    color: { type: string; x: number; y: number; x2: number; y2: number; colorStops: { offset: number; color: string; }[]; global: boolean; };
  }; data: any; barWidth?: string;
}[]=[]
  seriesData.forEach((item:any,index)=>{
    if(index<=4){
      
      if(index==0){
        yData.push({
          type: 'line',
          lineStyle: {
            width: 1, // 设置线条宽度
          },
          
          smooth: true,
          showSymbol: false,
          name:item.name,
          
          itemStyle: {
            // color: '#00B578',
            // width:1,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0.25, color: '#00B578' }, // 0% 处的颜色
                { offset: 0.5, color: '#3CFABA' }, // 50% 处的颜色
                { offset: 0.75, color: '#00B578' }, // 0% 处的颜色
                { offset: 1, color: '#00B578' }, // 100% 处的颜色
              ],
              global: false, // 缺省为 false
            },
          },
          data: item.data,
        })
      }else{
        let color = index==1?'#278AFF':(index==2?'#1ED7FF':(index==3?'#288DFF':"#6172FD"))
        let colors = index==1?'#163152':(index==2?'#144252':(index==3?'#144252':"#144252"))
        yData.push({
          type: 'bar',
          barWidth: '6px',
          smooth: true,
          showSymbol: false,
          name:item.name,
          itemStyle: {
            // color: '#278AFF',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: color }, // 0% 处的颜色
                { offset: 1, color: colors }, // 100% 处的颜色
              ],
              global: false, // 缺省为 false
            },
          },
          data: item.data,
        })
      }
      
      
    }
    
  })

  useEffect(() => {
    barChart.current?.setOption({
      grid: {
        left: '1%',
        right: '1%',
        bottom: '-5%',
        top: '38%',
        containLabel: true,
      },
      legend: {
        left: 'left', // 图例居左
        // data: ['总供应量', '黑鱼', '海鲈海鲈'],
        // width: '100%', // 设置 legend 的宽度
    // type: 'scroll', // 如果内容过多，可以使用滚动模式
    orient: 'horizontal', // 水平排列
    textStyle: {
      // width: 'auto', // 文本宽度自适应
      // overflow: 'truncate', // 超出部分截断
      // ellipsis: '...', // 超出部分显示省略号
      color: '#ffffff',
          fontSize: '.14rem',
          
          // minMargin:1
    },
    itemWidth: 5, // 每个图例项的宽度
    itemGap: 0, // 图例项之间的间距
        // itemWidth: 2,
        itemHeight: 5,
        data: chartName,
        // icon: 'circle',
        
       
      },
      tooltip: {
        trigger: 'axis', // 触发类型。
        backgroundColor: '#233346', // 背景色
        borderWidth: 0,
        axisPointer: {
          // 指示器类型。
          type: 'line',
          crossStyle: {
            color: '#fff', // 线的颜色。
          },
        },
        textStyle: {
          color: '#fff',
        },
      },
      xAxis: [
        {
          type: 'category',
          data: xAxisData,
          
          // boundaryGap: false, // false时从0刻度开始
          axisLine: {
            // 坐标轴轴线
            show: false,
          },
          axisTick: {
            // 坐标轴刻度
            show: false,
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            color: '#697682',
            fontSize: '.12rem',
            rotate: 45, // 取值范围[-90, 90]
          },
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          name: '单位: 吨',
          type: 'value',
          // interval: 20, 值之间的间距
          axisLabel: {
            color: '#697682',
            formatter: '{value}',
            margin: 3, // 坐标轴文字距离坐标轴的距离
            fontSize: '.14rem',
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              type: 'dotted',
              color: ['rgba(130, 144, 157, 0.18)'],
            },
          },
          nameTextStyle: {
            fontSize: '.15rem', // 设置单位字体大小
          },
          // nameLocation: 'start', // 设置标签位置，可选 'start', 'middle', 'end'
          // nameGap: -70, // 设置标签与轴线之间的距离
        },
        {
          type: 'value',
          // min: 80,
          axisLabel: {
            formatter: '{value}',
            fontSize: '.14rem',
          },
          splitLine: {
            show: false,
            // 坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              type: 'dotted',
              color: ['rgba(130, 144, 157, 0.18)'],
            },
          },
        },
      ],
      series:yData,
    } as EChartsOption);
  }, [barChart, seriesData, xAxisData]);

  return <div style={{ height: '100%' }} ref={barRef}></div>;
};
